<template>
    <div class="index">
        <div class="sort-div"></div>
        <div class="sort">
            <div class="primary-school" :class="{active:clickType==='primary'}" @click="scrollToPart('primary')">小学</div>
            <div class="middle-school" :class="{active:clickType==='middle'}" @click="scrollToPart('middle')">初中</div>
            <div class="height-school" :class="{active:clickType==='height'}" @click="scrollToPart('height')">高中</div>
        </div>
        <div class="part" ref="learning" v-if="books[0]&&books[0].list.length">
            <sort-part type='0' :list="books[0].list"></sort-part>
        </div>
        <div class="part" ref="primary" v-if="books[1]&&books[1].list.length">
            <sort-part type='1' :list="books[1].list"></sort-part>
        </div>
        <div class="part" ref="middle" v-if="books[2]&&books[2].list.length">
            <sort-part type='2' :list="books[2].list"></sort-part>
        </div>
        <div class="part" ref="height" v-if="books[3]&&books[3].list.length">
            <sort-part type='3' :list="books[3].list"></sort-part>
        </div>
        <router-link tag="div" to="/personal" class="head">
            <img src="../assets/img/logo.png" alt="">
        </router-link>
    </div>
</template>
<script>
import io from 'api/io'
import SortPart from './SortPart'
export default {
    name: 'index',
    components: {
        SortPart
    },
    data() {
        return {
            books:[],
            clickType: ''
        }
    },
    created () {
        this.getWordRepoList()
    },
    beforeDestroy () {
        window.scrollTo(0,0)
    },
    methods: {
        async getWordRepoList(){
            let {data}=await io.post(io.getWordRepoList)
            if(data.success){
                this.books=data.data
            }
        },
        scrollToPart(type) {
            this.clickType = type
            let scrollNum = this.$refs[type].offsetTop
            window.scrollTo(0,scrollNum-70)
        },
    }
}
</script>
<style lang="stylus" scoped>
.index
    background #f4fff4
    min-height 100%
    .head
        width 40px
        height 40px
        position fixed
        bottom 100px
        right 40px
        z-index 111
        opacity .8
    .sort,.sort-div
        height 70px
        background #f4fff4
        width 100%
    .sort
        display flex
        position fixed
        top 0
        align-items center
        padding 0 10px
        box-sizing border-box
        background #f4fff4
        z-index 1
        div
            flex 1
            margin 0 10px
            height 40px
            background-color: #ffffff;
            border-radius: 20px;
            border: solid 2px #8dcb46;
            display flex
            align-items center
            justify-content center
            color #333
            font-size 16px
            &.active
                background #8dcb46
                color #ffffff
    .part
        padding 0 10px
        margin-bottom 10px
</style>

